<script setup lang="ts">
import { computed, ref } from 'vue'
import OrderItem from './components/orderItem.vue'

// tabs 数据
const orderTabs = ref([
  { orderState: 0, title: '全部' },
  { orderState: 1, title: '待付款' },
  { orderState: 2, title: '待发货' },
  { orderState: 3, title: '待收货' },
  { orderState: 4, title: '待评价' },
])

// 知识点：uniapp里面通过 URL 传递的参数默认都会被解析为字符串类型，和你在这里设置的类型无关
const query = defineProps<{
  type: string //这里设置为number也无效，接收参数都是string类型
}>()

// 知识点【计算属性】：这里不用计算属性是因为计算属性是只读的，不能直接修改
const activeIndex = ref(orderTabs.value.findIndex((item) => item.orderState === Number(query.type)))

// swiper滑动事件
const onChange: UniHelper.SwiperOnChange = (e) => {
  activeIndex.value = e.detail.current
}
</script>

<template>
  <view class="viewport">
    <!-- tabs -->
    <view class="tabs">
      <text class="item" @tap="activeIndex = index" v-for="(item, index) in orderTabs" :key="item.orderState">
        {{ item.title }}
      </text>
      <!-- 游标 -->
      <!-- 知识点【选项卡底部的游标线展示css】：参考思路，一行有 五个标签，就分为五等分，每一份代表对应的一个标签。当然也可以使用框架组件实现 -->
      <view class="cursor" :style="{ left: activeIndex * 20 + '%' }"></view>
    </view>
    <!-- 滑动容器 -->
    <swiper @change="onChange" :current="activeIndex" class="swiper">
      <!-- 滑动项 -->
      <!-- 知识点【多个tab列表展示实现思路】： 可以使用swiper实现，swiper的current索引和swiper-item的索引值是对应的，据此可以实现点击不同的tab菜单展示不同的数据-->
      <swiper-item v-for="value in orderTabs" :key="value.orderState">
        <!-- <div class="orderItem"> 知识点【scrollview】：记录一个坑，scrollview需要有固定高度才可以滚动，而且它如果有父元素，父元素也需要有固定高度，否则无法实现滚动。最好的办法是不要给scrollview设置父元素 -->
        <OrderItem :orderState="value.orderState" />
        <!-- </div> -->
      </swiper-item>
      <!-- 知识点【多tab列表实现经验】：如上面，每个tab对应一个展示页，所以这些页面必须是独立的，不能共用参数（比如分页参数必须独立），所以有几个tab就必然需要渲染几个独立页面（也就是要渲染几个OrderItem组件） -->
      <!-- 知识点:uniapp本身有组件实现多个tab切换的功能(本项目是自己写了一个),但如果想逃实现类似轮播图那样的滑动切换页面,就需要结合swiper一起使用 -->
    </swiper>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

// tabs
.tabs {
  display: flex;
  justify-content: space-around;
  line-height: 60rpx;
  margin: 0 10rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
  position: relative;
  z-index: 9;

  .item {
    flex: 1;
    text-align: center;
    padding: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }

  .cursor {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20%;
    height: 6rpx;
    padding: 0 50rpx;
    background-color: #27ba9b;
    /* 过渡效果 */
    transition: all 0.4s;
  }
}

// swiper
.swiper {
  background-color: #f7f7f8;
}
</style>
